<template>
  <h1>请发表对vue的评论</h1>
  <main>
    <!-- left -->
    <AddCom @onAdd="onAdd" />
    <!-- right -->
    <ListCom :arr="arr"  @onDel="onDel" />
  </main>
</template>

<script setup>
import AddCom from './coms/AddCom.vue';
import ListCom from './coms/ListCom.vue';
import { ref } from 'vue';
//留言列表
const arr = ref([
    // {name:'鲁迅',info:'vue不错！'},
    // {name:'鲁迅',info:'vue不错！1'},
    // {name:'鲁迅',info:'vue不错！2'},
    // {name:'鲁迅',info:'vue不错！3'},
    // {name:'鲁迅',info:'vue不错！4'}
]);
// 捕捉到del事件
const onDel = index=>{
    // console.log('gr',index);
    arr.value.splice(index,1);
}
//捕捉到add事件
const onAdd=(name,info)=>{
  arr.value.unshift({name,info})
}
</script>

<style scoped>
.tr{text-align: right;}
main{display: flex;}
</style>